<template>
	<view class="forget-content">
		<view class="user">
			<u-input placeholder="输入手机号" type="number" v-model="params.mobile" clearable style="height:90rpx"></u-input>
		</view>
		<view class="code">
			<u-input placeholder="输入验证码" v-model="params.code" clearable style="height:90rpx;width: 70%;"></u-input>
			<span class="get-code" @tap="getCodeHandle">获取验证码</span>
			<!-- <span class="get-code" @tap=""><u-count-down ref="uCountDown" :show-hours="isShow" :show-minutes="isShow" :timestamp="timestamp" @change=""></u-count-down></span> -->
		</view>
		<view class="set-password">
			<u-input type="password" placeholder="设置密码" v-model="password" clearable style="height:90rpx"></u-input>
		</view>
		<view class="repeat-password">
			<u-input type="password" placeholder="重复密码" v-model="repeatPassword" clearable style="height:90rpx"></u-input>
		</view>
		<view class="complete-row">
			<u-button type="default" shape="circle" text="完成" class="complete-btn" @click="completeHandle"
				hover-class="none">完成</u-button>
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				timestamp: 60,
				repeatPassword:'',
				isShow: false,
				params:{
					mobile:'',
					code:'',
				},
				password:'',
			}
		},
		methods: {
			//获取验证码
			getCodeHandle(){
				console.log('获取验证码');
				
				const pram = {
					mobile: this.params.mobile,
					verificationEnums: 'FIND_USER'
				}
				API.getCodeByPhone(pram,pram.verificationEnums,pram.mobile).then(res=> {
					console.log('dddd',res)
				})
				// this.params.code='883011';
			},
			//重置密码
			completeHandle() {
				const pwd = this.md5(this.password)
				const pram = {
					...this.params,
					password: pwd
				};
				if(this.password==this.repeatPassword) {
					console.log(pram, 555,this.params);
					// 重置密码后返回登录页面
					API.resetByMobile(pram).then(res=> {
						console.log('ggg',res)
					})
				}else {
					uni.showToast({
						title: "两次密码不一致!",
						duration: 2000,
						icon: "none",
					});
				}
				
				// uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.forget-content {
		background-color: #fff;
		padding: 0rpx 50rpx;
		min-height: calc(100vh - 88rpx);
		overflow: hidden;
		.user{
			margin-top: 74rpx;
		}

		.user,
		.code,
		.set-password,
		.repeat-password {
			border-bottom: 1rpx solid #E3E3E3;
		}

		.code,
		.set-password,
		.repeat-password {
			margin-top: 50rpx;
			position: relative;

			.get-code {
				font-size: 26rpx;
				color: #F4333C;
				position: absolute;
				right: 0;
				top: 18rpx;
			}
		}

		.complete-row {
			margin-top: 60rpx;

			.complete-btn {
				background-color: #F4333C;
				color: #fff;
				height: 90rpx;
			}

			.u-hairline-border:after {
				border: none;
			}
		}
	}
</style>
